<!--
 * @Description: 
 * @Author: kangjie
 * @Date: 2021-09-15 22:20:51
 * @LastEditors: kanjie
 * @LastEditTime: 2021-09-23 17:16:52
-->
<template>
  <div>
    <!-- 头部 -->
    <div class="header">
      <Header/>
    </div>
    <!-- /头部 -->
    <!-- 体部 -->
    <div class="center">
      <!-- {{articleList}} -->
      <div class='wrapper'>
        <!-- 获取文章标题 -->
         <div class='title'>{{articleList.title}}</div>
          <div class='time'>
          <!-- 发表时间 -->
          <span>{{articleList.publishTime | fmtDate}}</span>
          <!-- 阅读次数 -->
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <span>{{articleList.readTimes}}</span>
          </div>
          <div class='bottom' v-html='articleList.content'></div>
      </div>
    </div>
    <!-- /体部 -->
    <!-- 底部 -->
    <div class="bottom">
      <Footer/>
    </div>
    <!-- /底部 -->
  </div>
</template>
<script>
import Header from '../components/Header'
import Footer from '../components/Footer'
import {get} from '../utils/request'
export default {
  // 2.注册局部组件
  components:{
    Header,
    Footer
  },
  data(){
    return {
      articleList:{},
      id:0
    }
  },
  created(){
    // 获取list传来的id
    this.id=this.$route.query.id;
    this.loadDetails()
  },
  methods:{
    // 加载文章详情页
    loadDetails(){
      let url='/index/article/findById'
      get(url,{id:this.id}).then(res=>{
        this.articleList=res.data
      })
    }
  }
}
</script>
<style lang="scss">
  .center{
    background-color:#ecf6f2;
    padding: 1em .5em;
    .wrapper{
      min-height: 500px;
      background-color: #fff;
      .title{
      font-size: 20px;
      text-align: center;
      color: #028b39;
    }
    .time{
      text-align: center;
      border-bottom: 1px solid #ededed;
    }
    }
  }
</style>